<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Computer Parts</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="createjs.min.js"></script>
        <script src="Laptop.js"></script>
        <script src="Part.js"></script>
        <script src="Textbox.js"></script>
        <script>
            var disableClickNew = false;
            var scount = 7;
            var xColumn = 30;
            var yPart1 = 690;
            var yPart2 = yPart1 + 100;
            
            var yTextbox = 120;
            var yTextboxInc = 75;
            
            var stage;
            var queue;
            var myLaptop;
            var myParts = [];
            var partData = [
                    {imgSource:"keyboard", x:xColumn, y:yPart1},
                    {imgSource:"hardDrive", x:xColumn, y:yPart2},
                    {imgSource:"ram", x:xColumn + 110, y:yPart1},
                    {imgSource:"cpu", x:xColumn + 110, y:yPart2},
                    {imgSource:"motherBoard", x:xColumn + 220, y:yPart1},
                    {imgSource:"touchPad", x:xColumn + 220, y:yPart2},
                    {imgSource:"screen", x:xColumn + 330, y:yPart1}
                ];
            var myTexts = [];
            var textData = [
                    {name:"Hard Drive", source:"hardDrive", x:xColumn, y:yTextbox,
                        description:"A hard disk drive is a data storage device used for storing and retrieving digital information using rapidly rotating disks (platters) coated with magnetic material. An HDD retains its data even when powered off."},
                    {name:"CPU", source:"cpu", x:xColumn, y:yTextbox + (yTextboxInc * 1),
                        description:"A central processing unit is the hardware within a computer that carries out the instructions of a computer program by performing the basic arithmetical, logical, and input/output operations of the system."},
                    {name:"Keyboard", source:"keyboard", x:xColumn, y:yTextbox + (yTextboxInc * 2),
                        description:"In computing, a keyboard is a typewriter-style device, which uses an arrangement of buttons or keys, to act as mechanical levers or electronic switches. Following the decline of punch cards and paper tape."},
                    {name:"Motherboard", source:"motherBoard", x:xColumn, y:yTextbox + (yTextboxInc * 3),
                        description:"A motherboard (sometimes alternatively known as the mainboard, system board, planar board or logic board, or colloquially, a mobo) is the main printed circuit board (PCB) found in computers and other expandable systems."},
                    {name:"RAM", source:"ram", x:xColumn, y:yTextbox + (yTextboxInc * 4),
                        description:"Random-access memory (RAM /ræm/) is a form of computer data storage. A random-access memory device allows data items to be read and written in roughly the same amount of time regardless of the order in which data items are accessed."},
                    {name:"Screen", source:"screen", x:xColumn, y:yTextbox + (yTextboxInc * 5),
                        description:"A monitor or a display is an electronic visual display for computers. The monitor comprises the display device, circuitry and an enclosure. The display device in modern monitors is typically a thin film transistor liquid crystal display (TFT-LCD) thin panel."},
                    {name:"Touchpad", source:"touchPad", x:xColumn, y:yTextbox + (yTextboxInc * 6),
                        description:"A touchpad is a pointing device featuring a tactile sensor, a specialized surface that can translate the motion and position of a user's fingers to a relative position on the operating system that is outputted to the screen."}
                ];

            var previousX = 0;
            var previousY = 0;

            function init() {
                //Create a stage by getting a reference to the canvas
                stage = new createjs.Stage("myCanvas");
                stage.enableMouseOver();
//                stage.canvas.title = 'put your tooltip text here';
                queue = new createjs.LoadQueue();
                queue.installPlugin(createjs.Sound);
                queue.addEventListener("complete", handleComplete);
                queue.loadManifest([
                    {id: "putSound", src: "assets/put.wav"},
                    {id: "popSound", src: "assets/pop.mp3"},
                    
                    {id: "bgSuccess", src: "assets/bg_success.jpg"},
                    {id: "bgText", src: "assets/bg-text.png"},
                    {id: "bgTextSuccess", src: "assets/bg-text-sucess.png"},
                    
                    {id: "laptop", src: "assets/laptop.png"},
                    {id: "hardDrive", src: "assets/hard_drive.png"},
                    {id: "cpu", src: "assets/cpu.png"},
                    {id: "keyboard", src: "assets/keyboard.png"},
                    {id: "motherBoard", src: "assets/motherboard.png"},
                    {id: "ram", src: "assets/ram.png"},
                    {id: "screen", src: "assets/screen.png"},
                    {id: "touchPad", src: "assets/touch_pad.png"}]);

            }

            function click_myLaptop(event) {
                if (disableClickNew === false) {
                    createjs.Sound.play("popSound");
                    myLaptop.disappearScale();
                    for(var index in textData) {
                        stage.addChild(myTexts[textData[index].source]);

                        myTexts[textData[index].source].appearLine(
                                myLaptop.bmp.x, myLaptop.bmp.y,
                                myTexts[textData[index].source].dragger.x,
                                myTexts[textData[index].source].dragger.y);
                    }
                    for(var index in myParts) {
                        myParts[index].addChild();
                        myParts[index].appearLine(
                                myLaptop.bmp.x, myLaptop.bmp.y,
                                myParts[index].dragger.x,
                                myParts[index].dragger.y);
                    }
                }
            }

            function handleComplete(event) {
                var myTitle = new createjs.Text("COMPUTER'S COMPONENT", "25px Arial", "#000");
                myTitle.textBaseline = "top";
                myTitle.x = (stage.canvas.width) / 2;
                myTitle.y = 40;
                myTitle.textAlign = "center";
                stage.addChild(myTitle);
                
                var myDescription = new createjs.Text("Drag images on bottom to suitable places on top for best describe the parts of the laptop", "13px Arial", "#000");
                myDescription.textBaseline = "top";
                myDescription.lineWidth = stage.canvas.width - 30;
                myDescription.x = (stage.canvas.width) / 2;
                myDescription.y = 70;
                myDescription.textAlign = "center";
                stage.addChild(myDescription);
                
                myBgSuccess = new createjs.Bitmap(queue.getResult("bgSuccess"));
                var bounds = myBgSuccess.getBounds();
                var currentWidth = bounds.width;
                var currentHeight = bounds.height;
                myBgSuccess.scaleX = stage.canvas.width / currentWidth;
                myBgSuccess.scaleY = stage.canvas.height / currentHeight;
                
                myLaptop = new Laptop("laptop");
//                stage.addChild(myLaptop);
                myLaptop.size(200, 400);
                myLaptop.appearSpin((stage.canvas.width), (stage.canvas.height));
                myLaptop.addClickListener(click_myLaptop);

                for(var index in textData) {
                    myTexts[textData[index].source] = new Textbox(
                            textData[index].name + " - " + textData[index].description, 
                            "#ffffff", 12, "bgText");
//                    myTexts[textData[index].source].lineWidth = stage.canvas.width - 100;
                    myTexts[textData[index].source].position(textData[index].x, textData[index].y);
                    stage.removeChild(myTexts[textData[index].source]);
//                    stage.addChild(myTexts[textData[index].source]);
                }

                for(var index in partData) {
                    var part = new Part(partData[index].imgSource);
                    part.dragger.addEventListener("pressup", handlePressUpParts);
                    part.dragger.addEventListener("pressmove", handlePressMoveParts);
                    part.size(70, 120);
                    part.position(partData[index].x, partData[index].y);
                    part.removeChild();
                    myParts[partData[index].imgSource] = part;
//                    myParts.push(part);
                }
                
                


                createjs.Ticker.setFPS(24);
                createjs.Ticker.addEventListener("tick", tick);

            }

            function getSource(x, y) {
                for(var index in myParts) {
                    if (myParts[index].dragger.x === x
                            && myParts[index].dragger.y === y) {
                        return myParts[index];
                    }
                }
                return "";
            }

            function handlePressUpParts(event) {
                var part = getSource(event.currentTarget.x, event.currentTarget.y);
                for(var index in textData) {
                    if (myTexts[textData[index].source].hitTest(event.stageX, event.stageY)) {
                        if (part.source === textData[index].source) {
                            createjs.Sound.play("putSound");
                            part.removeChild();
                            myTexts[textData[index].source].succeed();
                            scount--;
                            if (scount <= 0) {
                                disableClickNew = true;
                                stage.removeAllChildren();
                                
//                                for(var index in textData) {
//                                    stage.removeChild(myTexts[textData[index].source].dragger);
//                                }
                                stage.addChild(myBgSuccess);
                                for(var index in myParts) {
                                    myParts[index].addChild();
                                    myParts[index].appearLine(
                                            myParts[index].dragger.x,
                                            myParts[index].dragger.y,
                                            myLaptop.bmp.x, myLaptop.bmp.y
                                            );
                                    myParts[index].disappearScale();
                                }
                                myLaptop = new Laptop("laptop");
                                myLaptop.size(200, 400);
                                myLaptop.appearScale((stage.canvas.width));
                                
                                var myDescription = new createjs.Text("You Win. Congratulations!", "23px Arial", "#000");
                                myDescription.textBaseline = "top";
                                myDescription.lineWidth = stage.canvas.width - 30;
                                myDescription.x = (stage.canvas.width) / 2;
                                myDescription.y = 450;
                                myDescription.textAlign = "center";
                                stage.addChild(myDescription);
                                
                                stage.update();
                            }
                        }
                    }
                }
                // continue
                for(var index in partData) {
                    if (partData[index].imgSource === part.source) {
                        part.dragger.x = partData[index].x;
                        part.dragger.y = partData[index].y;
                        stage.update();
                    }
                }
            }

            

            function handlePressMoveParts(event) {
                previousX = event.currentTarget.x;
                previousY = event.currentTarget.y;
            }

            function handleClick(event) {

                createjs.Sound.play("putSound");
            }

            function tick() {
//                for(var index in myParts) {
//                    myParts[index].unhitScale();
//                    if (myParts[index].hitTest(stage.mouseX, stage.mouseY)) {
//                        myParts[index].hitScale();
//                    }
//                }
                
                //Update stage will render next frame
                stage.update();
            }

        </script>
    </head>
    <body onload="init()">
        <canvas id="myCanvas" width="500" height="1000">
            Alternative Content
        </canvas>
    </body>
</html>
